<template>
	<view>
		<view style="margin: 10px">
			<u-button
				@click="show = true">自{{$u.timeFormat(startTime, 'yyyy年mm月dd日')}}到{{$u.timeFormat(endTime, 'yyyy年mm月dd日')}}</u-button>
			<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		</view>
		<view class="container">
			<!-- 下拉刷新容器 -->
			<scroll-view scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadMore" @scrolltoupper="refresh"
				scroll-with-animation="true" class="scroll-view">
				<!-- 刷新状态提示 -->
				<view v-if="refreshing" class="refreshing">正在刷新...</view>
				<!-- 列表项 -->
				<view class="data">
					<view class="title">
						<image :src="$IMAGE_BASE_URL + '/img/diedao.png'"
							style="float:left;width: 54rpx; height: 54rpx;margin-left: 20rpx;">
						</image>
						<text style="padding-left: 20rpx;font-size: 30rpx;line-height: 54rpx;">跌倒报警</text>
						<!-- <text style="font-size: 18rpx;ine-height: 54rpx;">（%）</text> -->
					</view>
					<view class="list" v-for="(item, index) in items" :key="index">
						<view class="fl">{{$u.timeFormat(item.time*1, 'yyyy-mm-dd hh:MM:ss')}}</view>
						<view class="fr"><text class="red">发现跌倒</text></view>
					</view>
				</view>
				<!-- 加载状态提示 -->
				<view v-if="loading" class="loading">加载中...</view>
				<!-- 无更多数据提示 -->
				<view v-if="noMoreData" class="no-more-data">没有更多数据</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		getCurrentPage
	} from '@/core/app'
	import CacheConfig from "@/config/CacheConfig";
	import {
		device
	} from "@/api/login/index.js";
	import {
		historyPropert
	} from "@/api/device/index.js";
	import StorageUtils from "@/utils/StorageUtils";
	export default {
		data() {
			return {
				iotDeviceId: '',
				show: false,
				mode: 'range',
				startTime: Date.parse(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)),
				endTime: Date.parse(new Date()),
				items: [], // 列表数据
				refreshing: false, // 是否正在刷新
				loading: false, // 是否正在加载更多
				noMoreData: false, // 是否没有更多数据
				page: 0, // 当前页码
				scrollTop: 0, // 滚动条位置，用于重置滚动位置到顶部
			};
		},
		onReady() {
			this.iotDeviceId = getCurrentPage().query.iotDeviceId;
			// this.gethistoryPropert(this.iotDeviceId);
		},
		onLoad() {
			this.loadData(); // 页面加载时获取初始数据
		},
		methods: {
			change(e) {
				this.startTime = Date.parse(new Date(e.startDate.replace(/-/g, '/')));
				this.endTime = Date.parse(new Date(e.endDate.replace(/-/g, '/')));
				// this.gethistoryPropert(this.iotDeviceId);
				this.loadData(true)
			},
			 loadData(refresh = false) {
				let deviceId = getCurrentPage().query.iotDeviceId
				if(refresh){
					this.noMoreData=false
				}
				if (this.refreshing || this.loading ||this.noMoreData) return;
				let isRefresh = refresh;
				if (refresh) {
					this.refreshing = true;
					this.page = 1; // 刷新时重置页码为1
					this.items = []; // 清空列表数据
				} else {
					this.loading = true;
					this.page += 1; // 加载更多时页码加1
				}
				historyPropert({
					deviceId,
					startTime: this.startTime,
					endTime: this.endTime,
					current: this.page,
					size: 20,
					identifier: 'state'
				}).then(res => {
					res=res.obj
					if (res.records && res.records.length > 0) {
						if (isRefresh) {
							this.items = res.records;
						} else {
							this.items = [...this.items, ...res.records];
						}
					} else {
						this.noMoreData = true;
					}
						if(this.page >= res.obj.pages){
							this.noMoreData = true;
						}
					if (isRefresh) {
						this.refreshing = false;
						this.scrollTop = 0; // 刷新成功后重置滚动位置到顶部（如果需要）
					} else {
						this.loading = false;
					}
				}).catch(error => {
					if (isRefresh) {
						this.refreshing = false;
					} else {
						this.loading = false;
					}
					uni.showToast({
						title: '加载失败',
						icon: 'none',
					});
				});
			},
			// 下拉刷新
			refresh() {
				this.loadData(true);
			},
			// 上拉加载更多
			loadMore() {
				this.loadData();
			},
			gethistoryPropert(deviceId) {

			},
		}
	};
</script>
<style lang="scss">
	.fl {
		float: left;
	}

	.fr {
		float: right;
		text-align: right;
		font-weight: bold;
	}

	.title {
		margin-bottom: 20rpx;
	}

	.list {
		overflow: hidden;
		font-size: 24rpx;
		line-height: 80rpx;
		border-bottom: 5px solid #fff;
		background-color: #fffbe3;
		padding: 0 30rpx;

		.red {
			color: #df1717;
		}
	}

	.container {
		// padding: 20px;
	}

	.scroll-view {
		height: 100vh;
		/* 或者其他你需要的高度 */
		overflow: hidden;
	}

	.item {
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.refreshing,
	.loading {
		text-align: center;
		padding: 20px;
	}

	.no-more-data {
		text-align: center;
		padding: 20px;
		color: #999;
	}
	
	page{background-color: #fff;}
</style>